<script setup lang="ts">
import { useColumns } from "./functionLIst";
import { ElMessageBox } from "element-plus";
import type { funForm, appFunction } from "../utils/types";
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { saveAppFunction, getMsgTemList } from "@/api/application";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import IconSelect from "@/components/ReIcon/src/Select.vue";

const { columns, state, loadData, dataList, modeID, handleDelete } =
  useColumns();
import type { FormInstance, FormRules } from "element-plus";
const ruleFormRef = ref<FormInstance>();

const props = withDefaults(defineProps<funForm>(), {
  id: 0
});

const tempList = ref([]);

onMounted(async () => {
  const Result = await getMsgTemList();
  tempList.value = Result.result;
  modeID.value = props.id;
  loadData();
});
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  state.value = false;
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("确定要退出功能设计吗?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
function addNewFunction() {
  ruleFormRef.value?.resetFields();
  state.value = true;
  //resetForm(ruleFormRef);
}
const form = reactive<appFunction>({
  id: 0,
  modelID: modeID.value,
  funName: "",
  funSqlCode: "",
  contrlTable: "",
  contrlFalg: "",
  funSort: 1,
  contrlMsg: "",
  funIcon: "",
  addTime: "2021-8-9",
  addUser: 1,
  showType: "0",
  msgTemp: "",
  msgArr: ""
});

const rules = reactive<FormRules<appFunction>>({
  funName: [{ required: true, message: "请输入功能名称", trigger: "blur" }],
  funSqlCode: [
    {
      required: true,
      message: "请输入功能代码",
      trigger: "blur"
    }
  ],
  contrlFalg: [
    {
      required: true,
      message: "请选择功能类型",
      trigger: "blur"
    }
  ]
});
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async valid => {
    if (valid) {
      form.modelID = modeID.value;
      console.log(form);
      const Result = await saveAppFunction(form);
      console.log(Result, "Result");
      if (Result.isSuccess) {
        ElMessage("添加成功!");
        state.value = false;
        loadData();
      } else {
        ElMessage(Result.msg);
      }
    } else {
      ElMessage("表单验证错误！");
    }
  });
};
//编辑一个功能对象
const editFunction = row => {
  //form = row;
  form.id = row.id;
  form.funName = row.funName;
  form.modelID = row.modelID;
  form.funSqlCode = row.funSqlCode;
  form.contrlTable = row.contrlTable;
  form.contrlFalg = row.contrlFalg;
  form.funSort = row.funSort;
  form.contrlMsg = row.contrlMsg;
  form.addTime = row.addTime;
  form.addUser = row.addUser;
  form.funIcon = row.funIcon;
  form.showType = row.showType;
  form.disPhone = row.disPhone;
  state.value = true;
  form.msgTemp = row.msgTemp;
  form.msgArr = row.msgArr;
};
defineExpose({ addNewFunction });
</script>
<template>
  <pure-table :data="dataList" :columns="columns">
    <template #dateSlot="{ row }">
      {{ new Date(row.addTime).toLocaleDateString() }}
    </template>
    <template #image="{ row }">
      <IconifyIconOnline :icon="row.funIcon" width="30px" height="30px" />
    </template>
    <template #operation="{ row }">
      <el-button
        class="reset-margin"
        link
        type="primary"
        :size="size"
        :icon="useRenderIcon(EditPen)"
        @click="editFunction(row)"
      >
        编辑
      </el-button>
      <el-popconfirm
        :title="`是否确认删除功能名称为${row.funName}的这条数据`"
        @confirm="handleDelete(row)"
      >
        <template #reference>
          <el-button
            class="reset-margin"
            link
            type="primary"
            :size="size"
            :icon="useRenderIcon(Delete)"
          >
            删除
          </el-button>
        </template>
      </el-popconfirm>
    </template>
  </pure-table>
  <el-drawer v-model="state" title="功能设计" :before-close="handleClose">
    <el-form
      ref="ruleFormRef"
      :label-position="labelPosition"
      label-width="100px"
      :model="form"
      :rules="rules"
      style="max-width: 460px"
      status-icon
    >
      <el-form-item label="功能名称" prop="funName">
        <el-input v-model="form.funName" placeholder="请输入功能名称" />
      </el-form-item>
      <el-form-item label="功能图标" prop="funIcon">
        <IconSelect v-model="form.funIcon" />
      </el-form-item>
      <el-form-item label="表单操作" prop="showType">
        <el-radio-group v-model="form.showType" class="ml-4">
          <el-radio label="1" size="large">是</el-radio>
          <el-radio label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="移动端禁用" prop="disPhone">
        <el-radio-group v-model="form.disPhone" class="ml-4">
          <el-radio label="1" size="large">是</el-radio>
          <el-radio label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="功能类型" prop="contrlFalg">
        <el-select
          placeholder="请选择功能类型"
          clearable
          v-model="form.contrlFalg"
        >
          <el-option label="内置参数" :value="1" />
          <el-option label="外置参数" :value="2" />
          <el-option label="外置选择" :value="3" />
          <el-option label="消息接口" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="功能排序" prop="funSort">
        <el-input-number v-model="form.funSort" :min="1" :max="30" />
      </el-form-item>

      <el-form-item label="消息模板" prop="msgTemp">
        <el-select
          placeholder="请选择消息模板"
          v-model="form.msgTemp"
          clearable
        >
          <el-option
            v-for="item in tempList"
            :label="item"
            :value="item"
            :key="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="消息参数" prop="msgArr">
        <el-input
          v-model="form.msgArr"
          type="textarea"
          rows="2"
          placeholder="请输入消息参数"
        />
      </el-form-item>
      <el-form-item label="外置数据" prop="contrlTable">
        <el-input
          v-model="form.contrlTable"
          type="textarea"
          rows="6"
          placeholder="请输入数据并用$号隔开,例如：通过$不通过$退回"
        />
      </el-form-item>
      <el-form-item label="功能代码" prop="funSqlCode">
        <el-input
          v-model="form.funSqlCode"
          type="textarea"
          rows="6"
          placeholder="请输入SQL语句指令"
        />
      </el-form-item>
      <el-form-item label="预置消息" prop="contrlMsg">
        <el-input
          v-model="form.contrlMsg"
          type="textarea"
          rows="6"
          placeholder="请输入执行操作后需要显示的内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
